<!DOCTYPE html>
<html>
    <head>
   		<meta charset="UTF-8">
        <title>登录</title>
        <link rel="stylesheet" href="/static/css/common.css">
        <style>
            body {
	             
            }

            .form-signin {
                max-width: 330px;
                padding: 15px;
                margin: 0 auto;
            }
            .form-signin .form-signin-heading,
            .form-signin .checkbox {
                margin-bottom: 10px;
            }
            .form-signin .checkbox {
                font-weight: normal;
            }
            .form-signin input[type="text"],
            .form-signin input[type="password"],
            .form-signin input[type="email"] {
                position: relative;
                font-size: 16px;
                height: auto;
                padding: 10px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            .form-signin input[type="text"]:focus,
            .form-signin input[type="password"]:focus,
            .form-signin input[type="email"]:focus  {
                z-index: 2;
            }
            .form-signin input[type="text"] {
                margin-bottom: -1px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
            .form-signin input[type="password"] {
                margin-bottom: 10px;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
            .form-signin input[type="email"] {
                margin-bottom: -1px;
                border-radius: 0;
            }
        </style>
    </head>
    <body>
        <article class="layout-vbox">
            <header class="layout-middle-center">
                <img src="/static/img/logo.200x200.png" alt="Logo">
                <h1>佳佳乐商城VIP消费{{nowYear}}查询系统</h1>
            </header>
            
            <main class="layout-middle-center">
            	  <p>
                  	<input v-model="formdata.account" type="text" placeholder="用户名">
                  </p>
                  <p>
                  	<input v-model="formdata.password" type="password" placeholder="密码" class="input-block-level">
                  </p>
                  <p>
                  	<button  class="D3" type="button" @click="login">登录</button>
                  	<a href="/forget-passwrod.html">忘记密码</a>
                  </p>
            </main>

            <footer >
               <p class="align-center">
               		&copy;2008-{{nowYear}} 
               		<a href="mailto:yizhuoyan@hotmail.com">yizhuoyan@hotmail.com</a> 版权所有。 All rights reserved.
               </p>
            </footer>
        </article> 

        <script src="/static/js/common.js"></script>
        <script src="/static/js/vue.js"></script>
        <script src="/static/js/yi.toast.js"></script>
		<script>
			const app=new Vue({
				el:"body>article",
				data:{
					nowYear:new Date().getFullYear(),
					formdata:{
						account:null,
						password:null,
						captchaCode:null
					}
					
				},
				methods:{
					login:function(){
						const formdata=new URLSearchParams(this.formdata);
						fetchPost("/login.do",{
							body:formdata
						}).then(resp=>{
							if(resp.code!=="ok"){
								toast(resp.message);
								return;
							}
							toast("登录成功");
							let currentUser=resp.data;
							if(currentUser){
								window.sessionStorage.setItem("currentUser",JSON.stringify(currentUser));
								window.location.href="index.html";
							}
						})
					}
				}
			});
			
		</script>
    </body>
</html>
